<template>
    <div class="head">
        <span>消息</span>
        <van-icon name="brush-o" />
        <van-icon name="search" />
    </div>

    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>

    <bottom-nav />
</template>

<script>
import { ref } from 'vue';
import BottomNav from '../components/BottomNav.vue'
import { getCurrentInstance, reactive, onMounted } from "vue";
const axios = getCurrentInstance().appContext.config.globalProperties.$axios;

export default {

    setup() {
        const list = ref([]);
        const loading = ref(false);
        const finished = ref(false);

        const onLoad = () => {
            onMounted(() => {
                axios.get("http://rap2api.taobao.org/app/mock/data/1632421").then(res => {
                    console.log(res.data);
                    list.value = res.data;
                    // 加载状态结束
                    loading.value = false;

                    // 数据全部加载完成
                    if (list.value.length >= 40) {
                        finished.value = true;
                    }
                    console.log('list.value',list.value);
                }).catch(err => console.log(err));
            })
            return false;
            // 异步更新数据
            // setTimeout 仅做示例，真实场景中一般为 ajax 请求
            setTimeout(() => {
                for (let i = 0; i < 10; i++) {
                    list.value.push(list.value.length + 1);
                }

                // 加载状态结束
                loading.value = false;

                // 数据全部加载完成
                if (list.value.length >= 40) {
                    finished.value = true;
                }
            }, 1000);
        };

        return {
            list,
            onLoad,
            loading,
            finished,
        };
    },

    components: {
        BottomNav,
    }
}
</script>

<style scoped>
.head {
    padding: 10PX;
}

.head .van-icon {
    float: right;
    display: inline;
    color: #606060;
    padding-right: 10px;
    padding-top: 10px;
}

.head span {
    margin-left: 10px;
    color: #606060;
}
</style>